<template>
	<view class="rexian-content tn-padding-sm">
		<view class="tn-flex tn-flex-direction-row tn-margin-bottom item-v" v-for="(item, index) in dataList" :key="index">
		   <view class="infos-v">
				<view class="color-m-v">
					{{item.describe}}
				</view>
				<view class="tn-margin-bottom-sm blogger__item">
					<block v-if="item.images">
					  <view v-if="[1,2,4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
					    <image v-for="(image_item,image_index) in item.images" :key="image_index" @click="showImage(item,image_item)"
					      class="blogger__main-image"
					      :class="{
					        'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
					        'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
					      }"
					      :src="image_item.src"
					      mode="aspectFill"
					    ></image>
					  </view>
					  <view v-else class="tn-padding-top-xs">
					    <tn-grid  hoverClass="none" :col="3">
					      <block v-for="(image_item,image_index) in item.images" :key="image_index">
					        <!-- #ifndef MP-WEIXIN -->
					        <tn-grid-item style="width: 30%;margin: 10rpx;">
					          <image
					            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
					            :src="image_item.src"
					            mode="aspectFill"
					          ></image>
					        </tn-grid-item>
					        <!-- #endif-->
					        <!-- #ifdef MP-WEIXIN -->
					        <tn-grid-item style="width: 30%;margin: 10rpx;">
					          <image
					            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
					            :src="image_item.src"
					            mode="aspectFill"
					          ></image>
					        </tn-grid-item>
					        <!-- #endif-->
					      </block>
					    </tn-grid>
					  </view>
					</block>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-direction-row tn-margin-bottom-sm">
					<text class="tn-padding-right-sm tags-v" v-for="(tags, idx) in item.tagsList">{{tags}}</text>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-row-between tn-margin-bottom-sm tn-margin-bottom-sm">
					<text class="minifont">{{item.createdTime}}</text>
					<text class="minifont">{{item.createUserName}}发布</text>
				</view>
				<view class="tn-flex tn-flex-direction-row tn-flex-row-between tn-margin-bottom-sm" v-if="userInfo.userId == item.createdUserId">
					<text class="minifont"></text>
					<text class="minifont delete-view" @click="deletefunc(item)">删除</text>
				</view>
				<view class="line-view"></view>
		   </view>
		</view>
		
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		
		<tn-button class="fabu__btn" v-if="loginType == 1 && userInfo.userId !== tuid" width="100rpx" height="100rpx" backgroundColor="tn-cool-bg-color-7" :fontSize="40" shape="icon" margin="10rpx 10rpx" @click="gofabu"><text class="tn-icon-camera"></text></tn-button>
		
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default {
		name: 'rexian',
		
		data(){
			return {
				currenttab: 0,
				dataList: [],
				imageTitle: '',
				previewImg: '',
				showpopup: false,
				banjilist: [],
				showtnpopup: false,
				pinglunneirong: '',
				huifuItem: null,
				pageIndex: 1,
				totalPage:1,
				selectBanjiList: [],
				loginType: 2,
				userInfo: {},
				tuid: '08db9d35-8fbc-4236-8a7d-eb9dbb9b4ba5'
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.loginType = uni.getStorageSync('loginType');
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			// this.getbanjiFenlei();
			console.log(this.userInfo)
		},
		onPullDownRefresh() {
			this.pageIndex = 1
			this.getrenwulist();
			console.log('下拉刷新------')
		},
		onReachBottom() {
			this.pageIndex++;
			this.getrenwulist();
			console.log('上啦更多-------')
		},
		mounted() {
			this.userInfo = uni.getStorageSync('userInfo');
			console.log(this.userInfo)
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.loginType = uni.getStorageSync('loginType');
			console.log('this.loginType === ',this.loginType)
		},
		methods:{
			showImage(item,image_item){
				this.previewImg = image_item.src;
			},		
			changetab(index){
				this.currenttab = index
				this.queryFunction()
			},
			getbanjiFenlei(){
				this.request({
					url: '/SysClasses/List',
					method: 'get',
					params: {
						isArchived: false
					},
				}).then(res => {
					if(res.code == 200){
						this.banjilist = res.data.map(item => {
							item.children = []
							item.selected = false
							return item
						});
					}
					
					this.getrenwulist()
				})
			},
			gofabu(){
				console.log(123)
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/fabuxiangce'
				})
			},
			deletefunc(item){
				this.request({
					url: '/ClassAlbum/Delete',
					method: 'post',
					params: [{id: item.id}],
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
						  title: '',
						  content: '删除成功',
						  icon: 'success',
						  image: '',
						  duration: 1000
						})
						this.queryFunction()
					}
				})
			},
			queryFunction(){
				this.pageIndex = 1
				this.getrenwulist()
			},
			getrenwulist(){
				if(this.totalPage > 0 && this.pageIndex > this.totalPage){
					this.$refs.toast.show({
					  title: '',
					  content: '没有更多了',
					  icon: '',
					  image: '',
					  duration: 1000
					})
							uni.stopPullDownRefresh()
					return;
				}
				let params = {
					PageNo: this.pageIndex,
					PageSize: 10
				}
				if(this.loginType == 2){
					params.IsParent = true
				}else{
					params.IsParent = false
				}
				this.request({
					url: '/ClassAlbum/Page',
					method: 'get',
					params: params,
				}).then(res => {
						if(res.code == 200){
							if(this.pageIndex == 1){
								this.dataList = [];
							}
							let rows = res.data.rows;
							this.totalPage = res.data.totalPage;
							rows.forEach(item => {
								if(item.images && item.images.length){
									item.images.forEach(_img => {
										_img['src'] = this.imageTitle + _img.filedId;
									})
								}
								if(item.tags){
									item.tagsList = item.tags.split(',')
								}else{
									item.tagsList = []
								}
								this.dataList.push(item);
							})
								console.log(this.dataList)
						}
						uni.stopPullDownRefresh()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.rexian-content{
		min-height: 100vh;
			background-color: rgba(245, 245, 245, 1);
			padding-bottom: 100rpx;
	}
	.avatar-v{
		width: 150rpx;
		text-align: center;
	}
	.infos-v{
		width: 100%;
	}
	.item-v{
		color: #555555;
	}
	.border-line-view{
		width: 100%;
		height: 0;
		border-bottom: 1px solid #eeeeee;
	}
  .fabu__btn{
	  position: fixed;
	  bottom: 30%;
	  right: 10px;
  }
	  .blogger {
	    &__item {
	      padding: 0;
	    }
	    
	    &__author {
	      &__btn {
	        margin-right: -12rpx;
	        opacity: 0.5;
	      }
	    }
	    
	    &__desc {
	      line-height: 55rpx;
	      
	      &__label {
	        padding: 0 20rpx;
	        margin: 0rpx 18rpx 0 0;
	        
	        &--prefix {
	          color: #00FFC8;
	          padding-right: 10rpx;
	        }
	      }
	      &__content {
	        
	      }
	    }
	    
	    &__content {
	      margin-top: 18rpx;
	      padding-right: 18rpx;
	      
	      &__data {
	        line-height: 46rpx;
	        text-align: justify;
	        overflow: hidden;
	        transition: all 0.25s ease-in-out;
	      }
	      
	      &__status {
	        margin-top: 10rpx;
	        font-size: 26rpx;
	        color: #82B2FF;
	      }
	    }
	    
	    &__main-image {
	      border-radius: 16rpx;
	      
	      &--1 {
	        max-width: 80%;
	        max-height: 300rpx;
	      }
	      
	      &--2 {
	        max-width: 260rpx;
	        max-height: 260rpx;
	      }
	      
	      &--3 {
	        height: 180rpx;
	        width: 100%;
	      }
	    }
	    
	    &__count-icon {
	      font-size: 40rpx;
	      padding-right: 5rpx;
	    }
	    
	    &__ad {
	      width: 100%;
	      height: 500rpx;
	      transform: translate3d(0px, 0px, 0px) !important;
	      
	      ::v-deep .uni-swiper-slide-frame {
	        transform: translate3d(0px, 0px, 0px) !important;
	      }
	      .uni-swiper-slide-frame {
	        transform: translate3d(0px, 0px, 0px) !important;
	      }
	      
	      &__item {
	        position: absolute;
	        width: 100%;
	        height: 100%;
	        transform-origin: left center;
	        transform: translate3d(100%, 0px, 0px) scale(1) !important;
	        transition: transform 0.25s ease-in-out;
	        z-index: 1;
	        
	        &--0 {
	          transform: translate3d(0%, 0px, 0px) scale(1) !important;
	          z-index: 4;
	        }
	        &--1 {
	          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
	          z-index: 3;
	        }
	        &--2 {
	          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
	          z-index: 2;
	        }
	      }
	      
	      &__content {
	        border-radius: 40rpx;
	        width: 640rpx;
	        height: 500rpx;
	        overflow: hidden;
	      }
	      
	      &__image {
	        width: 100%;
	        height: 100%;
	      }
	    }
		}
	.line-view{
		width: 100%;
		padding-top: 10rpx;
		border-bottom: 2px dotted #aaaaaa;
	}
	.huifu{
		font-size: 24rpx;
		.yzhft{
			font-size: 26rpx;
		}
	}
	.bottom-view{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		height: 100rpx;
			background-color: rgba(245, 245, 245, 1);
	}
	.tab-cls{
		width: 40%;
	}
	.pop-content{
		height: 500rpx;
		overflow-y: auto;
	}
	  .image-check-view{
		  position: fixed;
		  top: 0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  z-index: 2;
		  background-color: rgba(1, 1, 1, 1);
		  &.active{
			  background-color: rgba(255,255,255, 1);
		  }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 36rpx;
			  z-index: 888;
			  color: #333333;
			  line-height: 36rpx;
		  }
	  }
	.tags-v{
		font-size: 26rpx;
		color: #01BEFF;
	}
	.minifont{
		font-size: 26rpx;
	}
	.color-m-v{
		color: #333333;
		font-size: 30rpx;
		margin-bottom: 10rpx;
	}
	.delete-view{
		color: #E83A30;
	}
</style>